<template>
  <div>
    <el-button type="primary" @click="openTaskDialog">Edit</el-button>
    <el-dialog
      title="Edit Task"
      :visible.sync="taskDialogVisible"
      width="35%"
      @close="resetNewTask"
    >
      <el-form :model="newTask" label-width="85px">
        <!-- 任务标题 -->
        <el-form-item label="Task Title">
          <el-input v-model="newTask.name" maxlength="50" show-word-limit />
        </el-form-item>

        <!-- 开始时间 -->
        <el-form-item label="Start Time">
          <el-date-picker
            v-model="newTask.startTime"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            style="width: 100%"
          />
        </el-form-item>

        <!-- 截止时间 -->
        <el-form-item label="Deadline">
          <el-date-picker
            v-model="newTask.endTime"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            style="width: 100%"
          />
        </el-form-item>

        <!-- 任务等级 -->
        <el-form-item label="Level">
          <el-radio-group v-model="newTask.priority">
            <el-radio :label="3">major</el-radio>
            <el-radio :label="2">minor</el-radio>
            <el-radio :label="1">common</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 任务状态 -->
        <el-form-item label="Status">
          <el-radio-group v-model="newTask.status">
            <el-radio :label="0">Unfinished</el-radio>
            <el-radio :label="1">Done</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 任务详情 -->
        <el-form-item label="Task Detail">
          <el-input
            type="textarea"
            v-model="newTask.details"
            placeholder="None"
            :rows="4"
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="taskDialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="confirmEditTask">Save Changes</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    selectedTask: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      taskDialogVisible: false,
      newTask: {
        name: "",
        startTime: null,
        endTime: null,
        priority: 3,
        status: 0,
        details: "",
      },
    };
  },
  methods: {
    openTaskDialog() {
      this.newTask = { ...this.selectedTask };
      this.taskDialogVisible = true;
    },
    resetNewTask() {
      this.newTask = {
        name: "",
        startTime: null,
        endTime: null,
        priority: 3,
        status: 0,
        details: "",
      };
    },
    confirmEditTask() {
      if (!this.newTask.name.trim()) {
        this.$message.error("Task name cannot be empty!");
        return;
      }
      if (!this.newTask.startTime || !this.newTask.endTime) {
        this.$message.error("Please select start and end time!");
        return;
      }
      if (new Date(this.newTask.startTime) > new Date(this.newTask.endTime)) {
        this.$message.error("Start time cannot be later than end time!");
        return;
      }

      this.newTask.startTime = new Date(this.newTask.startTime).toLocaleString();
      this.newTask.endTime = new Date(this.newTask.endTime).toLocaleString();

      // 通过事件将修改后的任务数据和状态变更标志传回父组件
      this.$emit("task-updated", { ...this.newTask }, this.newTask.status !== this.selectedTask.status);

      this.taskDialogVisible = false;
      this.resetNewTask();
    },
  },
};
</script>

<style scoped>
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
  }
  ::v-deep(.el-dialog) {
    border-radius: 15px; 
  }
</style>
